<template>
    <div class="timeline-container">
        <div class="timeline">
            <template v-if="total">
                <el-timeline>
                    <el-timeline-item 
                        :hide-timestamp="true"
                        :center="true"
                        type="primary"
                        :hollow="true"
                        size="large"
                        >
                        <h1>{{ `文章总览 - ${total}` }}</h1>
                    </el-timeline-item>
                    <el-timeline-item 
                        :hide-timestamp="true"
                        :center="true"
                        type="warning"
                        :hollow="true"
                        >
                        <h2>{{ 2024 }}</h2>
                    </el-timeline-item>
                    <el-timeline-item 
                        :hide-timestamp="true"
                        :center="true"
                        type="primary"
                        :hollow="true"
                        v-for="(blog) in archievePage.list" 
                        :key="blog.id" 
                        @click="handleClick(blog)" 
                        >
                        <el-card>
                            <h4>{{blog.title}}</h4>
                            <p>{{blog.author}} committed {{blog.date}}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </template>
            <div v-show="showPlaceholder">
                <el-skeleton :rows="10" animated />
            </div>
        </div>
        <div class="timeline-pagination">
            <el-pagination 
            size="small"
            color 
            layout="prev, pager, next" 
            :pager-count="5"
            v-model:current-page="currentPage"
            :hide-on-single-page="hideOnSinglePage"
            :total="total" 
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElLoading, ElMessage, ElSkeleton } from 'element-plus'

import timelineApi from '@/api/timeline.js'

const hideOnSinglePage = ref(true)

let archievePage = ref({});
let currentPage = ref(1);
let total = ref(0);
let pageSize = ref(10);

let showPlaceholder = ref(true);

const router = useRouter();

onMounted(() => {
    timelineApi.getArchievePages(1, 10).then((result) => {
        setTimeout(() => {
            console.log("归档分页数据：", result);
            showPlaceholder.value = false;
            archievePage.value = result;
            total.value = result.total;
        }, 2000)
    }).catch((err) => {
        ElMessage.error('加载失败');
    })
})

const handleClick = (blog) => {
    console.log('跳转到详情页面：id=' + blog.id);
    router.push({name:'detail', params:{id: blog.id}})
}

const handleCurrentChange = (val) => {
    const loading = ElLoading.service({
        target: '.timeline',
        lock: true,
		background: 'rgba(0, 0, 0, 0.01)'
    })
    console.log(`当前页: ${val}`);
    timelineApi.getArchievePages(val, pageSize.value).then((result) => {
        setTimeout(() => {
            loading.close();
            console.log("归档分页数据：", result);
            archievePage.value = result;
            total.value = result.total;
            // ElMessage.success('加载成功 ' + result.list.length + " 条数据")
        }, 2000)
    }).catch(error => {
        loading.close();
        ElMessage.error(error.message);
    })
}

</script>

<style lang="scss" scoped>

.timeline-container {
    display: flex;
    flex-direction: column;
    align-items: cennter;
    // margin: 0 5px;
    padding: 25px 20px;
    @include border;
    @include box-shadow;
}

.timeline {
    // width: 100%;
    align-self: stretch;
    text-align: left;
}

.timeline-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    // background-color: orange;
}

</style>